<template>
  <div class="messagecenter">
    <!-- 顶部导航栏 -->
    <div style="padding-bottom:46px">
      <van-nav-bar title="消息" fixed>
        <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
      </van-nav-bar>
    </div> 
    <!-- 消息内容 -->
    <div>
      <van-tabs v-model="active" class="tabs">
        <!-- 消息个数提示 -->
        <div class="info">5</div>
        <div class="info info2">9+</div>
        <!-- 没有数据是状态 -->
            <div v-show="list.length == 0" >
              <div class="no_msg">
                <img src="../../asset/images/messagecenter.png" alt="">
                <div class="no_msg_text">本月还没有已完成订单哦~</div>
              </div>
        </div>
      <van-tab>
        <div slot="title">个人消息</div>
        <!-- 个人消息内容 -->
        <div class="content_text" v-for="item in list" :key="item.id">
          <div class="content_text1">
            <div class="d1">{{item.title}}</div>
            <div class="d2">{{item.time}}</div>
          </div>
          <div class="content_text2">
            <span>{{item.cont}}</span>
            <span class="s1">1</span>
          </div>
        </div>
      </van-tab> 
      <van-tab>
        <div slot="title" >客服消息</div>
        <div></div>
      </van-tab>
    </van-tabs>
    </div>
  </div>
</template>
<script type="text/babel">
export default {
  name: "messagecenter",
  data() {
    return {
      active: 0,
      list:[
        {
          title:'您的订单已被取消',
          time:'18-06-22 12:12',
          cont:'海蓝创智回收点为您创建订单，已经完成交易，选择线、 上支付188元（点击查看详情）'
        }
      ]
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less">
.messagecenter {
  .tabs {
    .van-tab {
      font-size: 32px;
      color: #999;
    }
    .van-tabs__line {
      background-color: #f7a427;
    }
    .info {
      position: relative;
      top: -70px;
      left: 260px;
      z-index: 1000;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid red;
      background: red;
      color: #fff;
      text-align: center;
      line-height: 30px;
    }
    .info2 {
      top: -95px;
      left: 85%;
      width: 60px;
      border-radius: 30%;
    }
    .no_msg{
      text-align: center;
      margin:0 auto;
      img{
        width:290px;
        height:240px;
        margin-bottom:88px;
      }
    }
    .content_text {
      padding: 0 30px;
      .content_text1 {
        display: flex;
        justify-content: space-between;
        margin-bottom:5px;
        .d1{
          font-size:30px;
          color:#333;
        }
        .d2{
          font-size:24px;
          color:#999;
        }
      }
      .content_text2{
        font-size:28px;
        color:#999;
        .s1{
          margin-left:150px;
        }
      }
    }
  }
}
</style>
